<template>
	<view class="page home bgf7 c00">
		<image class="w-20 bg" src="/static/img/bg/home_bg.png"></image>
		<view class="aliC title pb20 cff" :style="{paddingTop: statusBar + 'px'}">订单管理</view>
		<u-tabs @click="switchTab" :list="tab" lineWidth="42" lineHeight="2" lineColor="#fff"
			:inactiveStyle="{color: '#fff'}" :activeStyle="{color: '#fff'}"
			:itemStyle="{width: 'calc(20% - 22px)',paddingBottom: '5px'}"></u-tabs>


		<scroll-view class="list" @scrolltolower="nextPage" scroll-y
			:style="{height: 'calc(100vh - 234rpx - ' + statusBar +'px)'}">


		

			<view v-for="(item,index) in list" @click="detail(item)" :key="index"
				class="bgff r2 pt10 pb20 px14 mt12 mx15">
				<view class="flex flexC flexB py10 borb mb6">
					<view class="">订单编号:{{item.order_no_str}}</view>
					<view class="c41 bold6">{{item.status_txt}}</view>
				</view>
				<view class="flex flexC flexB py6">
					<view class="">预约店铺</view>
					<view class="">{{item.shop.name}}</view>
				</view>
				<view class="flex flexC flexB py6">
					<view class="">预约时间</view>
					<view class="">{{item.start_time_text}}</view>
				</view>
				<view class="flex flexC flexB py6">
					<view class="">结束时间</view>
					<view class="">{{item.end_time_text}}</view>
				</view>
				<view class="flex flexC flexB py6">
					<view class="">消费者</view>
					<view class="">{{item.mobile}}</view>
				</view>
				<view class="flex flexC flexB py6">
					<view class="">订单时间</view>
					<view class="">{{item.create_time_text}}</view>
				</view>
				
				<view class="flex flexC flexB py6">
					<view class="">订单金额</view>
					<view class="cff0">￥{{item.amount}}</view>
				</view>
				<view class="flex flexC flexB py6">
					<view class="">实付金额</view>
					<view class="cff0">{{item.pay_amount}}</view>
				</view>
			
				<view class="flex flexC flexE mt10 aliC">
					<text v-if="item.status == 'payed'" class="bged r40 flex1 py4 mx3" @click.stop="update(item)">接单</text>
					<text v-if="item.status == 'payed'" class="bged r40 flex1 py4 mx3" @click.stop="xu(item)">派单(暂时不去)</text>
					
					<text v-if="item.status == 'taked'" class="bged r40 flex1 py4 mx3" @click.stop="update(item)">开始</text>
					<text v-if="item.status == 'doing'" class="bgf6 r40 flex1 py4 mx3" @click.stop="update(item)">完成</text>

				</view>
			</view>

			<uni-popup ref="updatePop" type="bottom">
				<view class="popup-content2">
					<button class="popup-btn button" @click.stop="updateTime">更改时间</button>
					<button class="popup-btn button" @click.stop="updateRoom">更换包厢</button>
					<view class="popup-btn" @click="$refs.updatePop.close()">取消</view>
				</view>

			</uni-popup>

			<uni-popup ref="roomPop" type="bottom">
				<view class="popup-content2">
					<button v-for="room in roomList" class="popup-btn button"
						@click.stop="setRoom(room)">{{room.name}}</button>
					<view class="popup-btn" @click="$refs.roomPop.close()">取消</view>
				</view>

			</uni-popup>


			<uni-popup ref="pop" type="bottom">
				<view class="popup-content2">
					<button class="popup-btn button" @click.stop="doXu(0.5)">半小时</button>
					<button class="popup-btn button" @click.stop="doXu(1)">1小时</button>
					<button class="popup-btn button" @click.stop="doXu(2)">2小时</button>

					<view class="popup-btn" @click="$refs.pop.close()">取消</view>
				</view>

			</uni-popup>

			<SimpleDateTimePicker ref="myPicker" @submit="handleSubmit" :start-year="2023" :time-init="initTime" />

		</scroll-view>
		<tabbar></tabbar>
	</view>
</template>

<script>
	import SimpleDateTimePicker from "uni_modules/buuug7-simple-datetime-picker/components/buuug7-simple-datetime-picker/buuug7-simple-datetime-picker.vue";

	const statusBar = uni.getSystemInfoSync().statusBarHeight + 10;
	export default {
		components: {
			SimpleDateTimePicker,
		},
		data() {
			return {
				statusBar,
				tab: [{
						name: '全部'
					},
					{
						name: '待接单'
					},
					{
						name: '消费中'
					},
					{
						name: '已完成'
					},
					{
						name: '已退款'
					}
				],
				currentTab: 0,
				page: 1,
				status: '',
				list: [],
				isnodata: false,
				isLastPage: false,
				selectShop: null,
				currentOrderItem: null,
				startTime: '时间选择',
				orderNo: '',
				roomList: [],
				initTime: ""
			}
		},
		onLoad() {

		},
		onShow() {
			this.list = [];
			this.isnodata=  false;
			this.isLastPage = false;
			this.getList();
		},
		methods: {
			
			

			dateStartChange(e) {
				this.startTime = e.detail.value;
			},

			updateRoom() {
				this.$refs.updatePop.close();
				this.$refs.roomPop.open();

			},

			setRoom(room) {
				this.$refs.roomPop.close();
				let param = {
					room_id: room.id,
					order_no: this.currentOrderItem.order_no
				};
				let that = this;
				this.$api.setRoom(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						this.list = [];
						this.page = 1;
						this.isLastPage = false;
						this.isnodata = false;
						this.getList();
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}
				})


			},

			getRoom() {
				let param = {
					shop_id: this.selectShop.id,

				};
				let that = this;
				this.$api.getRoomList(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.roomList = res.data;
					} else {

					}
				})
			},

			searchList() {
				if (this.startTime == '时间选择') {

					this.startTime = "";
				}
				this.list = [];
				this.page = 1;
				this.isLastPage = false;
				this.isnodata = false;
				this.getList();
			},

			update(item) {
				this.currentOrderItem = item;
				var status = "payed";
				if(item.status == 'payed'){
					status = "taked";
				} else if(item.status == 'taked'){
					status = "doing";
				}else if(item.status == 'doing'){
					status = 'done'
				}
				let param = {
					status: status,
					order_no:item.order_no
				};
				let that = this;
				this.$api.updateStatus(param).then(res => {
				
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						
						this.isnodata = false;
						this.isLastPage = false;
						this.page = 1;
						this.list = [];
						this.getList();
					} else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})

			},
			updateTime() {

				var start = this.currentOrderItem.book_start;
				var date = new Date(start);
				this.initTime = date.getTime();
				console.info("===initTime====" + this.initTime);
				this.$refs.updatePop.close();
				this.$refs.myPicker.show(this.initTime);

			},

			handleSubmit(e) {

				var day = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
				console.info(day);

				let param = {
					time: day,
					order_no: this.currentOrderItem.order_no,
				};
				let that = this;
				this.$api.updateOrderBookTime(param).then(res => {


					if (res.code == 1) {
						that.list = [];
						that.page = 1;
						that.isLastPage = false;
						that.isnodata = false;
						that.getList();
						uni.showToast({
							title: "更改成功",
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

			},

			doXu(hour) {
				this.$refs.pop.close();
				let param = {
					hour: hour,
					order_no: this.currentOrderItem.order_no,
				};
				let that = this;
				this.$api.sendOrderTime(param).then(res => {


					if (res.code == 1) {
						that.list = [];
						that.page = 1;
						that.isLastPage = false;
						that.isnodata = false;
						that.getList();
						uni.showToast({
							title: "续时成功",
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},

			xu(item) {

				this.currentOrderItem = item;
				this.$refs.pop.open();
			},
			openDoor(item, type) {
				let param = {
					type: type,
					room_id: item.room_id,
					order_no: item.order_no
				};
				let that = this;
				this.$api.cmdOpenDoor(param).then(res => {

					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 1) {

					} else {

					}
				})
			},

			overOrder(item) {
				let param = {
					order_no: item.order_no,
					room_id: item.room_id
				};
				let that = this;
				this.$api.cmdCloseOrder(param).then(res => {

					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 1) {

					} else {

					}
				})
			},

			detail(item) {
				uni.navigateTo({
					url: '/other/job/orderDetail?order_no=' + item.order_no
				})
			},

			switchTab(e) {


				var name = e.name;
				console.info(JSON.stringify(e))
				if (name == '全部') {
					this.status = ""
				} else if (name == "待接单") {
					this.status = "payed"
				} else if (name == "消费中") {
					this.status = "doing"
				} else if (name == "已完成") {
					this.status = "done"
				} else if (name == '已退款') {
					this.status = "refund"
				}
				this.page = 1;
				this.isnodata = false;
				this.isLastPage = false;
				this.list = [];
				this.getList();
			},

			nextPage() {
				if (this.isLastPage) return;
				this.page += 1;
				this.getList();
			},

			getList() {



				let param = {
					page: this.page,
					status:this.status
				};
				let that = this;
				this.$api.assistOrderList(param).then(res => {
					if (res.code == 1) {
						let length = res.data.length;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data[i]);
						}
						if (length < 10) {
							this.isLastPage = true;
						}
						if (that.list.length > 0) {
							that.isnodata = false;
						} else {
							that.isnodata = true;
						}
					} else {

					}
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.home {
		.tab2{
			z-index:99;
			position:relative;
		}
		.my-input-placeholder {
			color: #FFF
		}

		.wxu {
			width: 60rpx;
		}

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.list,
		.title {
			position: relative;
		}

		.w72 {
			width: 144rpx;
			display: inline-block;
		}
	}


	.popup-content2 {
		background: #FFFFFF;

		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}

		.button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
			font-size: 11pt;
		}

		button::after {
			border: none;
		}

		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}
</style>